<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title th:text="${taskDetail.taskTitle}"></title>
	<link th:href="@{/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet"/>
	<link th:href="@{/css/font-awesome.min.css?v=4.7.3}" rel="stylesheet"/>
	<link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.3}" rel="stylesheet"/>
	<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link rel="stylesheet" th:href="@{/css/index/index.css}">
	<!--导入layui-->
	<link rel="stylesheet" th:href="@{/ajax/libs/layui-v2.6.8/layui/css/layui.css}">
	<link href="../../../static/css/task-detail.css" th:href="@{/css/task-detail.css}" rel="stylesheet"/>
	<link rel="stylesheet" th:href="@{/css/profile/mystyle.css}">
</head>
<body class="gray-bg" id="my-body">
	<!--导航栏-->
	<div th:replace="include :: headNav"></div>
	<br>
	<br>
	<br>
	<br>
	<!--任务主体，内容-->
	<div class="container">
		<div class="row" style="width: 86%;margin-left: 7%">
			<!--<div class="col-sm-12 search-collapse">
                预留
            </div>-->
			<div class="col-sm-12 select-table table-striped" style="min-height: 600px">
				<!--任务标题-->
				<h1 id="taskTitle" th:text="${taskDetail.taskTitle}"></h1>

				<div class="task-info-box" id="task-info-box">
					<div class="task-bar-top">
						<div class="bar-content">
							<a class="follow-nickName " th:href="${'/system/user/home/'+user.userId}" target="_blank" rel="noopener" th:text="${user.userName}"></a>
							<span class="time" th:text="(${#strings.isEmpty(taskDetail.lastEditDate)}) ? ${#dates.format(taskDetail.createTime, 'yyyy-MM-dd HH:mm:ss')+'  创建'} : ${#dates.format(taskDetail.lastEditDate, 'yyyy-MM-dd HH:mm:ss')+'  修改'}"></span>
						</div>
					</div>
					<div class="task-status" id="task-status"></div>
					<div class="blog-tags-box">
						<div id="tag">
							<span style="color: #999aaa;font-size: 14px;font-weight: 300;margin-right: 20px" >文章标签</span>
						</div>
					</div>
					<!--<div class="operating">
                        <a class="href-article-edit" href="https://editor.csdn.net/md?articleId=123395998">编辑</a>
                    </div>-->
				</div>

				<!--匹配状况-->
				<div id="match-status" >
					<div class="column-group-item">
						<div class=" match-box-l">
							<span th:if="${taskDetail.status=='1'}">匹配中···</span>
							<span th:if="${taskDetail.status=='2'}">匹配成功，
									<span th:if="${taskDetail.matchStatus==0||taskDetail.matchStatus==null}">等待确认</span>
									<span th:if="${taskDetail.matchStatus==1}">已确认</span>
									<span th:if="${linkTask!=null?linkTask.matchStatus==1:0}" style="color: #FF666A">【对方已确认匹配】</span>
									<span th:if="${linkTask!=null?(linkTask.matchStatus==0||linkTask.matchStatus==null):0}" >【等待对方确认匹配】</span>
								</span>
						</div>
						<div class=" match-box-r">
								<span th:if="${taskDetail.status=='1'}">
									<span th:text="${'【'+taskMatchSize}+'】'">【10】</span>
									<span>个任务正在匹配</span>
									<span th:if="${taskMatchSize<50}">当前匹配人数较少，请耐心等待</span>
								</span>
							<!--TODO 这里的判断可能有问题-->
							<span th:if="${linkTask!=null&&taskDetail.status!='1'}">
									<img th:src="${#strings.isEmpty(linkTask.taskThumbnail)} ? '' : ${linkTask.taskThumbnail}" alt="" style="max-width: 20px;max-height: 28px;">
									<span th:text="${linkTask.taskTitle}">标题</span>
									<a href="#"  data-toggle="modal"  data-target="#myModal" style="color: #01AAED;">查看匹配详情</a>
								</span>
						</div>
					</div>
				</div>

				<!--任务详情-->
				<div th:utext="${taskDetail.taskContent}"></div>
				<br>
				<br>
<!--				<section data-mid="t22" style="margin: 20px 1em 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(34, 34, 34); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; line-height: 25.6px; display: flex; justify-content: center; align-items: center; -webkit-box-align: center; -webkit-box-pack: center;"><section data-mid="" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; text-align: center; line-height: 30px;"><section data-mid="" data-contenteditable="false" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; width: 95px; height: 2px; background-image: linear-gradient(to left, rgb(20, 20, 20), rgb(240, 240, 240)); display: inline-block; float: left; transform: translate(0px, 12px);"><br style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></section><section data-mid="" data-contenteditable="false" style="margin: 0px; padding: 3px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 50%; width: 10px; height: 10px; float: left; transform: translate(0px, 8px); background-color: rgb(177, 177, 177);"><section data-mid="" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 50%; width: 5px; height: 5px; background-color: rgb(20, 20, 20);"><br style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></section></section><section data-mid="" style="margin: 0px; padding: 0px 10px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(79, 79, 79); min-width: 70px; float: left;"><strong style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;">END</strong></section><section data-mid="" data-contenteditable="false" style="margin: 0px; padding: 3px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 50%; width: 10px; height: 10px; float: left; transform: translate(0px, 9px); background-color: rgb(177, 177, 177);"><section data-mid="" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 50%; width: 5px; height: 5px; background-color: rgb(20, 20, 20);"><br style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></section></section><section data-mid="" data-contenteditable="false" style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; width: 95px; height: 2px; background-image: linear-gradient(to right, rgb(20, 20, 20), rgb(240, 240, 240)); display: inline-block; float: left; transform: translate(-1px, 14px);"><br style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></section></section></section>-->
			</div>
		</div>
	</div>

	<!--匹配确认框-->
	<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" th:if="${linkTask!=null}">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" style="position: relative;z-index: 9999">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">关闭</span>
					</button>
					<div id="task-detail-top">
						<div class="user">
							<img class="img-circle" th:src="(${#strings.isEmpty(linkUser.avatar)}) ? @{/img/river.png} : @{${linkUser.avatar}}" th:onerror="'this.src=\'' + @{'/img/river.png'} + '\''">
							<div>
								<a th:href="${'/system/user/home/'+linkUser.userId}" target="_blank">
									<span class="user-name" th:text="(${#strings.isEmpty(linkUser.userName)}) ? ${linkUser.loginName+' | '}: ${linkUser.userName}+' | '">lihua</span>
									<span class="user-sex" th:if="${linkUser.sex=='0'}">性别：男</span>
									<span class="user-sex" th:if="${linkUser.sex=='1'}">性别：女</span>
								</a>
							</div>
						</div>
						<div class="user-detail">
							<span class="user-grade">自律等级</span>
							<span class="grade" th:text="${'LV'+linkUser.grade}">4</span>
							<span class="user-last-login" th:text=" ${'最近登录时间：'+ #dates.format(linkUser.loginDate, 'yyyy-MM-dd HH:mm:ss')}">最近登录时间</span>
						</div>
					</div>
				</div>
				<div class="modal-body">
					<div id="task-detail-bottom">
						<h3 style="font-weight: 500;color: #3D3D40">任务详情</h3>
						<div style="width: 100%;border-top: 1px solid #E5E5E5;z-index: 999"></div>
						<div style="margin-top: 20px">
							<div th:text="${linkTask.taskTitle}" style="font-size: 16px;color: #807d7d;font-weight: 600;margin-bottom: 15px">标题</div>
							<div th:text="${linkTask.taskSummary}" style="margin-bottom: 15px">简介</div>
							<div style="margin-bottom: 10px">
								<span id="tag-link" >标签：</span>
								<span th:text="${'结束时间：'+#dates.format(linkTask.finishDate, 'yyyy-MM-dd HH:mm:ss')}" style="margin-left: 10px">结束时间</span>
							</div>
							<div style="width: 100%;border-top: 1px solid #E5E5E5;z-index: 999;margin-bottom: 20px"></div>
							<div th:utext="${linkTask.taskContent}">具体内容</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--回到顶部图标-->
	<div class="move-top" title="回到顶部"></div>
	<div th:replace="include :: footer-nav-index"></div>


	<th:block th:include="include :: footer-layui" />
	<script th:inline="javascript">
		var datas = [[${@dict.getType('task_status')}]];
		var prefix = ctx + "taskcenter/taskcenter";
		$(function() {

			var status = $.table.selectDictLabel(datas,  [[${taskDetail.status}]])
			// 回到顶部绑定
			if ($.fn.toTop !== undefined) {
				var opt = {
					win:$('.ui-layout-center'),
					doc:$('.ui-layout-center')
				};
				$('#scroll-up').toTop(opt);
			}
			//去除任务状态样式
			//匹配中
			var status= status.replace("class='badge badge-primary'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-28px);position: absolute;top: 0;right: 0;'")
			//匹配成功
			var status= status.replace("class='badge badge-success'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-25px);position: absolute;top: 0;right: 0;font-size: 10px;'")
			//进行中
			var status= status.replace("class='badge badge-info'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-28px);position: absolute;top: 0;right: 0;'")
			//待评价
			var status= status.replace("class='badge badge-warning'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-28px);position: absolute;top: 0;right: 0;'")
			//已结束
			var status= status.replace("class='badge badge-danger'","style='width: max-content;color: #fff;transform: rotate(45deg) translateY(-32px) translateX(-28px);position: absolute;top: 0;right: 0;'")
			$('#task-status').html(status)

			//加载标签
			var tagStr = [[${taskDetail.tag}]]+""
			var tagStr = tagStr.replace('，',',')
			var strings = tagStr.split(',');
			for (let string of strings) {
				var tag = "<span class='label-tag'>"+string+"</span>"
				$('#tag').append(tag)
			}
			if ([[${linkTask!=null}]]){
				var tagLinkStr = [[${linkTask?.tag}]]+""
				var tagLinkStr = tagLinkStr.replace('，',',')
				var strings1 = tagLinkStr.split(',');
				for (let string of strings1) {
					var tag = "<span class='label-tag'>"+string+"</span>"
					$('#tag-link').append(tag)
				}
			}
		});
	</script>
</body>
</html>
